<template>
    <div class="help-wrapper">
        <Tabs type="card">
            <TabPane label="帮助中心">
                <!--搜索输入框-->
                <Input
                v-model="searchValue"
                placeholder="请输入想要搜索的问题"
                icon="ios-search-strong"
                @on-enter="handleSearch"
                @on-click="handleSearch"
                style="width: 100%"></Input>
                <!--搜索输入框end-->

                <div class="hs-container">
                    <div :class="{
                            'hs-menu': true,
                            'is-collapse': collapse
                        }">
                        <Card class="no-border-card">
                            <div slot="title" style="border-radius:0px">
                                <div class="hs-menu-title">
                                    <span v-show="!collapse">问题分类</span>
                                    <Icon type="navicon-round" @click="handleCollapse"></Icon>
                                </div>
                            </div>
                            <div v-if="list.length === 0 && !collapse" style="padding-left:10px">暂无内容</div>
                            <Collapse v-show="!collapse" v-model="questionValue" style="margin-top:-15px" accordion v-else >
                                <Panel v-for="parent in list" :key="parent.id" :name="parent.name">
                                    <span :class="{ text_active:questionValue[0]===parent.name }">{{parent.name}}</span>
                                    <ol slot="content" class="question-list">
                                        <li
                                            v-for="(it,idx) in parent.tips"
                                            @click="handleOpen(it.id, parent.name)"
                                            :class="{ text_active:(currentItem && currentItem.id) === it.id }"
                                            :key="idx">
                                            {{it.title}}

                                        </li>
                                    </ol>
                                </Panel>
                            </Collapse>
                        </Card>
                    </div>
                    <div class="hs-content">
                        <Spin fix v-if="loadingTip"></Spin>
                        <Card class="no-border-card">
                            <p slot="title" style="border-left:none;font-size:14px">
                                <span v-if="currentItem">{{currentParent}} > {{currentItem.title}}</span>
                                <span v-else>暂无内容</span>
                            </p>

                            <p class="question-content" v-if="currentItem" v-html="currentItem.message"></p>
                        </Card>
                    </div>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'

export default {
  name: 'helpspace_index',
  data () {
    return {
      searchValue: '',
      questionValue: [],
      currentItem: {},
      currentParent: '',
      list: [],
      loadingTip: false,
      collapse: false
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      this.loading = true
      try {
        this.list = await this.fetchClass()
        let defaultTip
        this.list.some(item => {
          if (item.tips.length) {
            this.questionValue = [item.name]
            this.currentParent = item.name
            defaultTip = item.tips[0]
            return true
          }
        })
        if (defaultTip && defaultTip.id) {
          await this.fetchTip(defaultTip.id)
        }
      } catch (err) {
        this.$Message.error(err.message)
      }
      this.loading = false
    },
    fetchTips (params) {
      return new Promise((resolve, reject) => {
        http.request(this, api.tips, null, params, (res, err) => {
          if (err) {
            reject(new Error('获取失败'))
          } else {
            resolve(res.rows)
          }
        })
      })
    },
    async fetchTip (id) {
      if (this.loadingTip) return
      this.loadingTip = true
      try {
        this.currentItem = await http.req(api.tip, [id], null)
      } catch (err) {
        console.log(err)
      } finally {
        this.loadingTip = false
      }
    },
    fetchClass () {
      return new Promise((resolve, reject) => {
        http.request(this, api.tip_class, null, null, (res, err) => {
          if (err) {
            reject(new Error('获取失败'))
          } else {
            resolve(res.rows)
          }
        })
      })
    },
    handleOpen (id, name) {
      this.currentParent = name
      this.fetchTip(id)
    },
    async handleSearch () {
      if (this.searchValue) {
        this.loading = true
        try {
          this.currentItem = {}
          const list = await this.fetchTips({ keyword: this.searchValue })
          this.list = [
            {
              id: 0,
              name: '搜索结果',
              tips: list
            }
          ]
          this.$nextTick(() => {
            this.questionValue = ['搜索结果']
          })
        } catch (err) {
          console.log(err)
        }
        this.loading = false
      } else {
        this.initData()
      }
    },
    handleCollapse () {
      this.collapse = !this.collapse
    }
  }
}
</script>
<style lang="less">
.hs {
    &-container {
        display: flex;
        margin-top: 20px;
        min-height: 560px;
    }

    &-menu {
        width: 300px;
        margin-right: 20px;

        &-title {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: 700;

            .ivu-icon {
                cursor: pointer;
            }
        }

        .ivu-icon-arrow-right-b {
            margin-right: 5px;
        }

        &.is-collapse {
            width: auto;

            .ivu-collapse-header {
                padding-left: 20px;
            }

            .question-list {
                padding-left: 25px;
                padding-right: 10px;
            }

            .ivu-card-head {
                padding: 0;
            }

            .ivu-icon {
                padding: 14px 16px;
            }
        }
    }

    &-content {
        position: relative;
        flex: 1;
    }
}
.help-wrapper {
    .ivu-collapse-content > .ivu-collapse-content-box {
        padding: 0;
    }
    .question-type {
        font-size: 14px;
        padding: 14px 16px;
        border: 1px solid #e9eaec;
        margin-bottom: 6px;
    }

    .question-list {
        padding: 20px 40px;
        li {
            margin-bottom: 10px;
            cursor: pointer;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .text_active {
        color: #05bac5;
    }
    .question-content {
        padding: 20px;
        padding-top: 0;
        line-height: 2;

        img {
            max-width: 100%;
        }
    }

    .help-container {
        border: 1px solid #bbbec4;
        min-height: 600px;
        &:last-child {
            margin-left: -1px;
        }
    }
}
</style>
